<template>
  <el-row :gutter="20">
    <el-form ref="form" :model="form" label-width="80px">
      <!--      <el-col :span="14">-->
      <!--        <el-form-item label="">-->
      <!--          <el-checkbox-group v-model="form.optionsList">-->
      <!--            <el-checkbox v-for="item in options" :label="item" :key="item">-->
      <!--              {{ item }}-->
      <!--            </el-checkbox>-->
      <!--          </el-checkbox-group>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <el-col :span="18">
        <el-form-item label="附件" v-model="form.fileList">
          <el-upload
            class="upload-demo"
            :action="uploadApi"
            :data="fileData"
            :headers="headers"
            :file-list="showFileList"
            :on-success="handleUpload"
            :on-remove="handleRemove"
            multiple
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <!--          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="18">
        <el-form-item label="置顶">
          <el-switch v-model="form.topFlag" />
        </el-form-item>
      </el-col>
      <el-col :span="18">
        <el-form-item label="添加时间">
          <el-date-picker
              type="datetime"
              placeholder="选择日期时间"
              v-model="form.createDate"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
<!--      <el-col :span="18">-->
<!--        <el-form-item label="置顶">-->
<!--          <el-switch v-model="form.topFlag" />-->
<!--        </el-form-item>-->
<!--      </el-col>-->
    </el-form>
  </el-row>
</template>

<script>
import { uploadAttachmentApi } from "@/api/modules/common.api";
import day from "dayjs";

export default {
  props: ["moduleList", "annexes"],
  data() {
    return {
      // options: ["加粗", "置顶", "推送学校"],
      limit: 1,
      form: {
        fileList: [],
        optionsList: [],
        modelIdList: [],
        date: "",
        topFlag: false,
        createDate: "",
      },
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
      uploadApi: uploadAttachmentApi,
      fileData: {
        objType: 1,
      },
      fileList: [],
      showFileList: [],
    };
  },
  watch: {
    annexes: {
      handler(value) {
        // if (value.boldFlag) {
        //   this.form.optionsList.push("加粗");
        // }
        // if (value.topFlag) {
        //   this.form.optionsList.push("置顶");
        // }
        // if (value.pushSchool) {
        //   this.form.optionsList.push("推送学校");
        // }
        this.form.topFlag = value.topFlag;
        this.form.createDate = value.createDate;
        value.attachmentList.forEach((item) => {
          this.fileList.push(item.attachmentId);
        });

        value.attachmentList.forEach((item) => {
          this.showFileList.push({
            name: item.fileName,
            url: item.filePath,
            id: item.attachmentId,
            attrType: item.attrType,
          });
        });
      },
      deep: true,
    },
  },
  methods: {
    getContent() {
      return {
        attIdList: this.fileList,
        topFlag: this.form.topFlag,
        createDate: this.form.createDate
            ? day(this.form.createDate).format("YYYY-MM-DD HH:mm:ss")
            : "",
        // boldFlag: this.form.optionsList?.includes("加粗"), //是否加粗
        // topFlag: this.form.optionsList?.includes("置顶"), //是否置顶
        // pushSchool: this.form.optionsList?.includes("推送学校"), //是否推送学校
      };
    },
    handleRemove(file, fileList) {
      this.fileList = [];
      fileList.forEach((item) => {
        if (item.response.errno === 0) {
          this.fileList.push(item.response.data.attrId);
        }
      });
    },
    handleUpload(response, f, fileList) {
      this.fileList = [];
      fileList.forEach((item) => {
        if (item.response.errno === 0) {
          this.fileList.push(item.response.data.attrId);
        }
      });
    },
  },
};
</script>
